<template>
	<view class="ljs-steps">
		<view class="listBox" ref="listBox" id="listBox">
			<template v-for="(item, i) in showData">
				<view class="listBox-item" :key="i">
					<view class="dot" :style="{
						width: opts.dotSize + 'rpx',
						height: opts.dotSize + 'rpx',
						'border-radius': opts.dotRadius,
						'background-color': opts.dotColor,
						left: (60 - opts.dotSize) / 2 + 'rpx',
						top: stepTop + 'rpx',
					}"></view>
					<view
						v-if="i !== showData.length - 1"
						class="line"
						:style="{
							width: opts.lineSize + 'rpx',
							'background-color': opts.lineColor,
							left: (60 - opts.lineSize) / 2 + 'rpx',
							top: stepTop + 'rpx',
						}"></view>
					<slot :row="item"></slot>
				</view>
			</template>
		</view>
	</view>
</template>

<script>
	import index from './index.js'
	export default index
</script>

<style lang="scss" scoped>
	@import "./index.scss";
</style>
